<template>
  <div>

    <div style="display: flex; justify-content: end; padding: 0 20px; margin: 5px 0;">
      <div style="width: 180px; margin-right: 10px; text-align: right;">总商品金额:</div>
      <div style="width: 100px; text-align: right;">￥{{ totalPrice }}</div>
    </div>

    <div style="display: flex; justify-content: end; padding: 0 20px;">
      <div style="width: 180px; margin-right: 10px; text-align: right;">运费:</div>
      <div style="width: 100px; text-align: right; color: rgb(255, 102, 0);">￥6.00</div>
    </div>

    <div style="background-color: #f4f4f4; width: 1000px; margin: 10px 0; padding: 10px 0;">
      <div style="display: flex; justify-content: end; padding: 0 20px; margin: 5px 0; align-items: center;">
        <div style="width: 180px; margin-right: 10px; text-align: right;">应付总额:</div>
        <div style="width: 100px; text-align: right; color: #e4393c; font-size: 18px; font-weight: 700;">￥{{ totalPrice }}</div>
      </div>
      <div style="display: flex; justify-content: end; padding: 0 20px; margin: 5px 0; align-items: center;">
        <div style="text-align: right;">
          寄送至: {{ addressInfo.area + " " + addressInfo.address }}
          收货人: {{ addressInfo.consignee + " " + addressInfo.phone }}
        </div>
      </div>
    </div>

    <div style="display: flex; justify-content: end;">
      <el-button
        style="width: 135px; height: 36px;"
        color="#3271ae"
        @click="this.$emit('submit')"
      >提交订单</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    totalPrice: Number,
    addressInfo: Object,
  },
};
</script>